<template>
    <canvas id="myCanvas" width="1700" height="820" ref="cvs"></canvas>
</template>

<script lang="ts" setup>
import Circle from "@/features/basic-shape/Circle";
import Line from "@/features/basic-shape/Line";
import Feature from "@/features/Feature";
import Rect from "@/features/basic-shape/Rect";
import { IPoint } from "@/Interface";
import { Utils } from "@/utils";
import { message } from "ant-design-vue";
import { onMounted, ref } from "vue";
import { AlignType, Events, FontFamily } from "../Constants";
import GridSystem from "../GridSystem";
import Img from "@/features/basic-shape/Img";

const cvs = ref(null);
let gls = ref<GridSystem | null>(null);

const callback = ref<((remove?: boolean) => void) | undefined>(undefined);

onMounted(() => {
    reset();
})

function reset(clear = false) {
    if (clear) localStorage.setItem("features", '');
    if (gls.value) {
        gls.value.destroy();
        gls.value = null;
    }
    let canvasDom = cvs.value as unknown as HTMLCanvasElement;
    const gridSys = new GridSystem(canvasDom);
    gridSys.initEventListener();
    gridSys.loadFont(FontFamily.SHISHANG);
    gridSys.draw(true)
    gls.value = gridSys;
    setSize(canvasDom);

    const img = new Img("/img.png", -150, 100);
    img.border = AlignType.BOTTOM
    img.strokeStyle = "#000"
    img.radius = 0;
    gls.value.addFeature(img)

    const img2 = new Img("", 50, 100);
    gls.value.addFeature(img2)
    img.on(Events.LOADED, () => {  // 不要在
        img2.src = img.src;
        // img.setSize(img.size.width + 100);
    })

    setTimeout(() => {
        img.src = "/girl.png"
    }, 2000);

}

function setSize(canvasDom: HTMLCanvasElement) {
    canvasDom.width = document.documentElement.clientWidth - 4;
    canvasDom.height = document.documentElement.clientHeight - 4;

    window.onresize = () => {
        canvasDom.width = document.documentElement.clientWidth - 4;
        canvasDom.height = document.documentElement.clientHeight - 4;
    }
}

</script>